<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论道计时</title>
    <link rel="stylesheet" href="jsq.css"> <!-- 正确链接到 jsq.css -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script>

    <!-- 引入 particles.js -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<header>
    <h1>论道计时</h1>
    <img src="../images/loudou.png" alt="江汉大学 Logo">
</header>

<!-- 粒子效果容器 -->
<div id="particles-js"></div>

<div class="content">
    <!-- container1: 包含队伍信息和当前环节 -->
    <div class="container1">
        <!-- 队伍名称（正方与反方）放在两侧 -->
        <div class="team-section">
            <div class="team team-left">
                <h2>正方：AA队</h2>
            </div>
            <div class="team team-right">
                <h2>反方：ZZZ队</h2>
            </div>
        </div>

        <!-- 辩题名称居中显示 -->
        <div class="debate-topic">
            <h2>情在理先 / 理在情先</h2>
        </div>

        <!-- 当前环节显示 -->
        <div class="round-section">
            <h2 id="currentRound">当前环节：正方一辩发言</h2>
        </div>
    </div>

    <!-- container2: 包含计时器 -->
    <div class="container2">
        <div class="timer-section">
            <div class="timer" id="timer1">03:00</div>
            <!-- 为 layout2 添加第二个计时器 -->
            <div class="timer hidden" id="timer2">03:00</div> 
        </div>
    </div>    
</div>

<!-- 在 footer-container 之前添加登录按钮和表单 -->
<div class="login-section">
    <button id="loginBtn" class="login-button">登录</button>
</div>

<div id="loginModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>管理员登录</h2>
        <form id="loginForm">
            <input type="text" id="username" placeholder="请输入用户名" required>
            <input type="password" id="password" placeholder="请输入密码" required>
            <button type="submit">登录</button>
            <div id="loginError" class="error-message"></div>
        </form>
    </div>
</div>

<!-- 修改 footer 部分 -->
<div class="footer-container">
    <footer>
        <div class="control-button" id="startBtn">开始倒计时</div>
        <div class="control-button admin-only hidden" id="pauseBtn">暂停</div>
        <div class="control-button admin-only hidden" id="resetBtn">重置</div>
        <div class="control-button admin-only hidden" id="prevStageBtn">上一环节</div>
        <div class="control-button admin-only hidden" id="nextStageBtn">下一环节</div>
        <div class="control-button" id="startLeftBtn">启动正方</div>
        <div class="control-button" id="startRightBtn">启动反方</div>
    </footer>
</div>

<!-- 引用 jsq.js 文件 -->
<script src="jsq.js"></script>

<!-- 添加音频元素，用于播放计时器结束时的音效 -->
<audio id="alarmSound" preload="auto">
    <source src="assets/alarm.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<!-- 初始化 particles.js -->
<script>
    particlesJS("particles-js", {
        particles: {
            number: {
                value: 100, // 粒子数量
                density: {
                    enable: true,
                    value_area: 800
                }
            },
            color: {
                value: "#ffffff" // 粒子颜色
            },
            shape: {
                type: "circle", // 粒子的形状
                stroke: {
                    width: 0,
                    color: "#000000"
                }
            },
            opacity: {
                value: 0.5, // 粒子的透明度
                random: true,
                anim: {
                    enable: true,
                    speed: 1,
                    opacity_min: 0.1
                }
            },
            size: {
                value: 3, // 粒子的大小
                random: true,
                anim: {
                    enable: true,
                    speed: 4,
                    size_min: 0.1
                }
            },
            move: {
                enable: true,
                speed: 2, // 粒子移动速度
                direction: "random",
                random: true,
                straight: false,
                out_mode: "out"
            }
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: true,
                    mode: "repulse" // 鼠标悬停时粒子的交互效果
                },
                onclick: {
                    enable: true,
                    mode: "push" // 鼠标点击时粒子的交互效果
                }
            }
        },
        retina_detect: true
    });
</script>

</body>
</html>